<title>菜单列表 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<!--表格插件css-->
<link rel="stylesheet" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">菜单列表</div>
                </header>
                <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="add-btn" onclick="add()" type="button" class="btn btn-primary me-1">
                            <span class="mdi mdi-plus" aria-hidden="true"></span> 新增菜单
                        </button>
                        <button type="button" class="state-btn btn btn-success me-1" data-status="1">
                            <span class="mdi mdi-check" aria-hidden="true"></span> 启用
                        </button>
                        <button type="button" class="state-btn btn btn-warning me-1" data-status="2">
                            <span class="mdi mdi-block-helper" aria-hidden="true"></span> 禁用
                        </button>
                    </div>
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表格插件js-->
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.js"></script>
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    const requestUrl = "{:url('/admin/menu/list')}";
    let objHtml = [
        {
            'title': '重置API',
            'a-class': 'reload-btn',
            'icon': 'mdi-reload',
            event: (event, value, row, index) => {
                let loader = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/menu/reload')}", {id: row.id}).success(res => {
                    loader.destroy();
                    res.code === 200 && refreshTable();
                }).error();
            }
        },
        {
            'title': '添加',
            'a-class': 'add-btn',
            'icon': 'mdi-plus',
            event: (event, value, row, index) => {
                add(row.id);
            }
        },
        {
            'title': '编辑',
            'a-class': 'edit-btn',
            'icon': 'mdi-pencil',
            event: (event, value, row, index) => {
                openPage({
                    url: "{:url('/admin/menu/edit')}",
                    param: {
                        id: row.id
                    }
                }, '编辑菜单页');
            }
        },
        {
            'title': '删除',
            'a-class': 'del-btn',
            'icon': 'mdi-window-close',
            event: (event, value, row, index) => {
                reconfirm({
                    url: "{:url('/admin/menu/del')}",
                    param: {id: row.id},
                    method: 'deletes',
                    success: (res) => {
                        res.code === 200 && refreshTable();
                    }
                }, '确定删除吗？', '请再次确认是否删除？');
            }
        },
    ];

    function add(id = 0){
        let data = {
            url: "{:url('/admin/menu/add')}",
            param: {},
        };
        if(id > 0){
            data.param.id = id;
        }
        openPage(data, '新增菜单页');
    }

    /**
     * 批量 上架/下架按钮
     */
    $(document).on('click', '.state-btn', function () {
        var self    = $(this);
        var selRows = $('#table').bootstrapTable("getSelections");
        if(selRows.length === 0){
            showErrorNotify("请至少选择一行");
            return;
        }
        var postData = [];
        $.each(selRows,function(i) {
            postData.push(this.id);
        });
        let tipsTitle = self.data('status') === 1 ? '启用' : '禁用';
        reconfirm({
            url: "{:url('/admin/menu/state')}",
            param: { idx: postData, status: self.data('status') },
            success: (res) => {
                res.code === 200 && refreshTable();
            }
        }, '确定将这些数据' + tipsTitle + '吗？', '请再次确认是否' + tipsTitle);
    });

    let requestMethod = {
        1: '<span class="badge bg-success">GET</span>',
        2: '<span class="badge bg-warning">POST</span>',
        3: '<span class="badge bg-info">PUT</span>',
        4: '<span class="badge bg-danger">DELETE</span>'
    };
    const columns = [{
        field: 'example',
        checkbox: true,
        // 是否可视(默认 - true)
        visible: true,
        // 列的宽度
        width: 5,
        // 宽度单位
        widthUnit: 'rem'
    }, {
        field: 'serialNumber',
        title: '编号',
        // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
        // h表示横向，v标识垂直
        align: 'center',
        switchable: false,
        // 列的宽度
        width: 5,
        // 宽度单位
        widthUnit: 'rem'
    }, {
        field: 'name',
        align: 'left',
        title: '菜单名',
        width: 16,
        // 宽度单位
        widthUnit: 'rem',
        formatter:function(value, row, index){
            let string = '';
            for(var i = 1; i < row.level; i++){
                string += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            }
            string += '|---'
            return value ? string + value : '-';
        }
    }, {
        field: 'icon',
        align: 'center',
        title: '图标',
        width: 4,
        // 宽度单位
        widthUnit: 'rem',
        formatter:function(value, row, index){
            return value ? '<i class="mdi ' + value + '"></i>' : '-';
        }
    }, {
        field: 'request_method',
        title: '请求方式',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return ((row.level === 2 || row.level === 3) && requestMethod[value]) ? requestMethod[value] : '-';
        }
    },  {
        field: 'location',
        title: '地址',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return value ? value : '-';
        }
    }, {
        field: 'module',
        title: '模块',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return value ? value : '-';
        }
    }, {
        field: 'method',
        title: '方法',
        width: 8,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return value ? value : '-';
        }
    }, {
        field: 'show',
        title: '可视状态',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return (value !== 1 ? '<span class="badge bg-secondary">隐藏</span>' : '<span class="badge bg-success">显示</span>');
        }
    },  {
        field: 'status',
        title: '状态',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter:function(value, row, index){
            return (value !== 1 ? '<span class="badge bg-secondary">禁用</span>' : '<span class="badge bg-success">启用</span>');
        }
    }, {
        field: 'operate',
        title: '操作',
        align: 'right',
        width: 10,
        widthUnit: 'rem',
        formatter: btnGroup,  // 自定义方法
        events: btnEvents(objHtml)
    }];

    // 自定义操作按钮
    function btnGroup (value = '', row = '', index = '') {
        let html = '';
        for(var key in objHtml){
            if(
                (row.is_home_page === 1 && key === '1')   //首页导航不需要添加功能
                ||
                (row.is_home_page === 1 && key === '3')   //首页导航不能删除
                ||
                (row.level !== 2 && key === '0')    //只有二级菜单可以使用API功能
                ||
                (row.level === 2 && key === '1')    //只有二级菜单不需要添加功能
                ||
                row.level === 3     //三级菜单不需要任何功能
            ){
                continue;
            }
            html += '<a href="#!" class="btn btn-sm btn-default ' + ((+key + 1) !== objHtml.length ? 'me-1' : '' ) + ' ' + objHtml[key]['a-class'] + '" title="' + objHtml[key]['title'] + '" data-bs-toggle="tooltip">';
            html += '<i class="mdi ' + objHtml[key]['icon'] + '"></i>';
            html += '</a>';
        }
        return html;
    }
    tablePagination = false;
</script>

<script type="text/javascript" src="/static/admin/js/common/table.js"></script>
<script>
    $(function (){

        //下拉框更新样式
        $('.exampleSelect').each(function() {
            var $this = $(this);
            $this.lyearSelect({
                width: $this.data('width') ? $this.data('width') : '', // width示例：75px、50%
                placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',
                search: $this.data('search') ? $this.data('search') : false,
            });
        });

        //下拉选择搜索项
        $('.search-bar .dropdown-menu a').click(function() {
            $(this).parents('.search-bar').find('.search-field').val(($(this).data('field') || ''));
            $(this).parents('.search-bar').find('.search-btn').html($(this).text());
        });
    });
</script>